<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 50px;
				height: 50px;
				background-color: antiquewhite;
			}
			#div2{
				width: 50px;
				height: 50px;
				background-color: aqua;
			}
			#div3{
				width: 50px;
				height: 50px;
				background-color: darkblue;
			}
			
		</style>
	</head>
	<body>
		<!-- 2.新制作一个页面，要求：
		       2.1 至少包含以下元素：3个DIV,标题，5个P标签，图片，列表 
		       2.2 分别实id,类，标签三种方式查找以上元素 -->
		<h1>标题</h1>
		<div id="div1" >
		
		</div>
		<div id="div2" class="dd">
			
		</div>
		<div id="div3">
			
		</div>
		<input type="button" name="" id="" value="获取div元素" onclick="getdiv()" />
		<input type="button" name="" id="" value="获取标签父节点" onclick="getbiaoqian()" />
		<p>内容1</p>
		<p>内容2</p>
		<p>内容3</p>
		<p>内容4</p>
		<p>内容5</p>
		<img src='' >
		<ul>
			<li>内容**</li>
			<li>内容**</li>
		</ul>
	</body>
	<script type="text/javascript">
		function getdiv(){
			var div1obj=document.getElementById('div1')
			console.log('div1obj');
			var div2obj=document.getElementsByClassName('dd')
			console.log('div2obj');
		}
		function getbiaoqian(){
			var div=document.getElementsByTagName('div')
			var h1=document.getElementsByTagName('h1')
			var p=document.getElementsByTagName('p')
			var ul=document.getElementsByTagName('ul')
			var li=document.getElementsByTagName('li');
			console.log(div);
			console.log(h1);
			console.log(p);
			console.log(ul);
			console.log(li);
		}
		
	</script>
</html>
